<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body table {
            border: 1px solid black;
        }

        th {
            border: 1px solid black;
            text-align: center;
            line-height: center;
            width: 200px;
            height: 30px;
        }

        td {
            border: 1px solid black;
            text-align: center;
            line-height: center;
        }
    </style>
</head>

<body>
    <div id="box">
        <span>ID:</span>
        <input type="text" name="text" placeholder="请输入ID">
        <span>姓名:</span>
        <input type="text" name="text" placeholder="请输入姓名">
        <span>电话:</span>
        <input type="text" name="text" placeholder="请输入电话号码">
        <button type="button" class="stor">保存</button>
        <!--
            表格的创建
          -->
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Tel</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody id='tbody'>
                <!-- <tr>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                    <td>删除</td>
                </tr> -->
                <a href=""></a>
            </tbody>
        </table>

    </div>
    <script src="./lib/jquery.min.js"></script>
    <script>
        $(function () {
            $('.stor').click(function () {
                var txt1 = $('#box input').eq(0).val();
                var txt2 = $('#box input').eq(1).val();
                var txt3 = $('#box input').eq(2).val();

                var str = '';
                str += '<tr>';
                str += '<td>'+txt1+'</td>';
                str += '<td>'+txt2+'</td>';
                str += '<td>'+txt3+'</td>';
                str += '<td><a href="javascript:;">删除</a></td>';
                str += '</tr>';
                
                $('#tbody').append(str);

                if(txt1&&txt2&&txt3){
                    // $('#tbody').append(str);
                    // for(var i=0;i<$('#box input').length;i++){
                    //     $('#box input').eq(i).val('');
                    // }
                } 
            });

            // 获取动态创建 a标签元素
            $('#box').on('click','#tbody a',function(){
                // console.log(11);
                $(this).parents('tr').remove();
            })

        })
    </script>
</body>

</html>